Phoenix 專案在創建時會幫忙產生路由相關的模組。

lib/sample_project_web/router.ex

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

pipeline函式可以讓你定義不同的路由管道，這些管道可以經過不同的plug(見Day16)處理，如果是其他web框架的概念下，就是經過不同Middleware的那種感覺。

已預設的 router 為例，:browser管道定義了請求回傳的格式為 html，而:api則有 json。

接著，利用 scope 函式，我們可以定義路由群組，而不同的路由群組可以對應到不同的路由管道進行不同的處理。

以下面這個例子來講
GET http://localhost:4000/會對應到 PageController 的 index 函式。且會經由:browser管道。
GET http://localhost:4000/test/page1會對應到 PageController 的 page1 函式。且會經由:browser管道。
GET http://localhost:4000/api/test會對應到 ApiController 的 index 函式。且會經由:api管道。

  scope "/", SampleProjectWeb do
    pipe_through :browser

    get "/", PageController, :index
  end

  scope "/test", SampleProjectWeb do
    pipe_through :browser

    get "/page1", PageController, :page1
    get "/page2", PageController, :page2
  end
  
  scope "/api", SampleProjectWeb do
    pipe_through :api
    
    get "/test", ApiController, :index
  end

Phoenix提供了一個方便的語法，可以進行路由的檢查。

$ mix phx.routes
  page_path            GET   /                       SampleProjectWeb.PageController :index
  page_path            GET   /test/page1             SampleProjectWeb.PageController :page1
  page_path            GET   /test/page2             SampleProjectWeb.PageController :page2
  live_dashboard_path  GET   /dashboard              Phoenix.LiveView.Plug :home
  live_dashboard_path  GET   /dashboard/:node/:page  Phoenix.LiveView.Plug :page
  websocket            WS    /live/websocket         Phoenix.LiveView.Socket
  longpoll             GET   /live/longpoll          Phoenix.LiveView.Socket
  ongpoll              POST  /live/longpoll          Phoenix.LiveView.Socket
  websocket            WS    /socket/websocket       SampleProjectWeb.UserSocket

然後，編輯PageController
lib/sample_project_web/controllers/page_controller.ex

defmodule SampleProjectWeb.PageController do
  use SampleProjectWeb, :controller

  def index(conn, _params) do
    render(conn, "index.html")
  end

  def page1(conn, _params) do
    render(conn, "page1.html")
  end
  
  def page2(conn, _params) do
    render(conn, "page2.html")
  end
end

然後新增lib\sample_project_web\templates\page\page1.html.eex和page2.html.eex這兩支檔案後，便可以在 http://localhost:4000/test/page1 和 http://localhost:4000/test/page2 看到頁面內容。

然後透過Router.Helpers以及，mix phx.routes時列出的path helper名稱，可以如下例，直接查出路由的url進行使用。

iex> alias SampleProjectWeb.Router.Helpers, as: Routes 
SampleProjectWeb.Router.Helpers
iex> alias SampleProjectWeb.Endpoint    
SampleProjectWeb.Endpoint
iex> Routes.page_path(Endpoint, :page2)
"/test/page2"

透過在路由添加 resources 函式，可以建立 RESTful API 的一系列相關路由，現在我們對router.ex做以下修改:

  scope "/", SampleProjectWeb do
    pipe_through :browser

    resources "/posts", PostController
#    get "/", PageController, :index
  end

#  scope "/test", SampleProjectWeb do
#    pipe_through :browser
#
#    get "/page1", PageController, :page1
#    get "/page2", PageController, :page2
#  end
  
#  scope "/api", SampleProjectWeb do
#    pipe_through :api
#    
#    get "/test", ApiController, :index
#  end

然後輸入mix phx.routes，便可以直接查看到生成的路由。

page_path            GET     /posts             SampleProjectWeb.PageController :index
page_path            GET     /posts/:id/edit    SampleProjectWeb.PageController :edit
page_path            GET     /posts/new         SampleProjectWeb.PageController :new
page_path            GET     /posts/:id         SampleProjectWeb.PageController :show
page_path            POST    /posts             SampleProjectWeb.PageController :create
page_path            PATCH   /posts/:id         SampleProjectWeb.PageController :update
                     PUT     /posts/:id         SampleProjectWeb.PageController :update
page_path            DELETE  /posts/:id         SampleProjectWeb.PageController :delete
live_dashboard_path  GET     /dashboard         Phoenix.LiveView.Plug :home
live_dashboard_path  GET     /dashboard/:node/:page   Phoenix.LiveView.Plug :page
websocket            WS      /live/websocket    Phoenix.LiveView.Socket
longpoll             GET     /live/longpoll     Phoenix.LiveView.Socket
longpoll             POST    /live/longpoll     Phoenix.LiveView.Socket
websocket            WS      /socket/websocket  SampleProjectWeb.UserSocket

關於路由相關語法及更多Page helper的用法，可以查找官方文件